<template>
    <div class="micro-detail-container">
	  <download></download>
        <div class="header" :style="{'background-image': 'url('+detailItem.backgroundImg+')'}">
            <h3 class="header-title">{{detailItem.title}}</h3>
            <p>{{detailItem.summary}}</p>
        </div>
        <div class="all-audio-box">
            <div class="audio-header">
                <h3 class="title">全部音频</h3>
                <span><img :src="detailItem.coverImg" alt="">{{detailItem.catetory}}人订阅</span>
            </div>
            <div class="audio-list">
                <div class="audio-item" v-for="(item, index) in audioList" :key="index">
                    <h3 class="list-header">{{item.title}}</h3>
                    <span class="timer">{{item.createDate}}</span>
                    <p>{{item.mainTitle}}</p>
                </div>
            </div>
        </div>
        <div class="box-item">
            <h3>专栏介绍</h3>
            <p v-html="detailItem.introductionHtml"></p>
        </div>
        <div class="box-item" style="padding-bottom: 1.0rem">
            <h3>适宜人群</h3>
            <p>{{detailItem.suitablePeople}}</p>
        </div>
        <!-- <div class="box-item">
            <h3>订阅须知</h3>
            <p v-html="detailItem.notes"></p>
        </div> -->
        <div class="footer-box" v-if="isAgent">
            <router-link class="haibao" :to="{path: '/post', query: {agentId: agentId, pid: id, type: 2}}">生成海报图</router-link>
            <div class="share-btn" @click="shardBtn">立即分享</div>
        </div>
        <div class="footer-box" v-else>
            <router-link :to="{path: '/microList', query: {mid:id}}" class="read-btn">免费试读</router-link>
            <div class="get-btn" @click="buyMicro"><span>订阅专栏</span><span class="price-item">(¥{{detailItem.price}})</span></div>
        </div>
        <share-wechat v-if="shareShow" @destroyF="destroyFix"></share-wechat>
    </div>
</template>
<script>
import shareWechat from '../shareWechat.vue'
import market from '@/api/market.js'
import cookie from '../../../../util/cookie.js'
import third from '@/api/thirdPay.js'
import axios from '../../../../util/axios'
import download from '../../../components/download.vue'
export default {
    components: {
        shareWechat,
		download
    },
    data () {
        return {
            shareShow: false,
            detailItem: {},
            uid: localStorage.getItem('dongHang_common_user') ? JSON.parse(localStorage.getItem('dongHang_common_user')).uid : '',
            audioList: [],
            id: this.$route.query.pid,
            isAgent: '',
            level: localStorage.getItem('dongHang_data') ? JSON.parse(localStorage.getItem('dongHang_data')).level : '',
            title: '',
            des: '',
            imgUrl: '',
            myAgentId: this.$route.query.myAgentId
        }
    },
    created () {
        if (this.myAgentId) {
            sessionStorage.myAgentId = this.myAgentId
        }
        this.isAgent = localStorage.getItem('dongHang_data') ? true : false
        this.agentId = this.isAgent ? JSON.parse(localStorage.getItem('dongHang_data')).agentId : ''
        this.level = this.isAgent ? JSON.parse(localStorage.getItem('dongHang_data')).level : -1
        this.uid = localStorage.getItem('dongHang_common_user') ? JSON.parse(localStorage.getItem('dongHang_common_user')).uid : false
    },
    mounted () {
        this.getDetail()
        this.getAudio()

    },
    methods: {
        weiXinConfig() {
          var link = "http://dh.rz158.com/#/microDetail?agentId=" + this.agentId + "&pid=" + this.id + '&myAgentId=' + this.agentId;
          var url = 'http://dlsapi.rz158.com/thirdPay/getConfig?url=' + location.href.split('#')[0];
          third.sharedWeiXin(url, this.title, this.des, link, this.imgUrl);
        },
        shardBtn() {
          this.shareShow = true;

          // var link = "http://dh.rz158.com/#/microDetail?agentId=" + this.agentId + "&pid=" + this.id;
          // wx.onMenuShareTimeline({
          //   title: this.title,
          //   desc: '房间爱看书了房间卡上的',
          //   link: link,
          //   imgUrl: this.imgUrl,
          //   success: function() {
          //
          //   }
          // });
          // wx.onMenuShareAppMessage({
          //   title: '打开解放军的顺利开机费',
          //   desc: '飞机快圣诞节疯狂的世界看见看见今飞凯达时间飞逝',
          //   link: link,
          //   imgUrl: this.imgUrl,
          //   type: 'link',
          //   dataUrl: '',
          //   success: function () {
          //
          //   }
          // });
        },
        getUrlParam (name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
          var r = window.location.search.substr(1).match(reg);
          if (r != null) return unescape(r[2]);
          return null;
        },
        destroyFix() {
            this.shareShow = false;
        },
        getDetail () {
            if (this.isAgent || !this.uid) {
                var obj = {
                    mid: this.$route.query.pid
                }
            } else {
                var obj = {
                    mid: this.$route.query.pid, 
                    uid: this.uid
                }
            }
            market.getMicroDetail(obj).then(res => {
                if (res.code == 0) {
                    this.detailItem = res.result;
                    cookie.set('img', this.detailItem.coverImg);
                    // cookie.set('tttt', this.detailItem.title);
                    sessionStorage.setItem("tttt", this.detailItem.title);
                    cookie.set('allprice', this.detailItem.price);
                    this.title = this.detailItem.title;
                    this.des = this.detailItem.introduction;
                    this.imgUrl = this.detailItem.backgroundImg;
                    this.weiXinConfig()
                }
            })
        },
        getAudio () {
            market.getCourseList({
                mid: this.$route.query.pid,
                orderBy: 1,
                page: 1,
                pagesize: 10,
                isFree: 1
            }).then(res => {
                if (res.code == 0) {
                    this.audioList = res.result
                }
            })
        },
        buyMicro () {
            if (!this.isAgent) {
                // if (this.uid) {
                //     market.checkLogin(this.uid).then(res => {
                //         if (res.code == 0) {
                //             cookie.set('allprice', this.detailItem.price)
                //             this.$router.push({path: '/microsure', query:{agentId: this.$route.query.agentId, pid: this.$route.query.pid, uid: this.uid}})
                //         } else if (res.code == -1){
                //             this.$router.push({path: '/user/login', query: {type: 2, agentId: this.$route.query.agentId, pid: this.$route.query.pid}})
                //         }
                //     })
                // } else {
                    this.$router.push({path: '/user/login', query: {type: 2, agentId: this.$route.query.agentId, pid: this.$route.query.pid}})
                // }
            } else {
                this.$router.push({path: '/microsure', query:{agentId: this.$route.query.agentId, pid: this.$route.query.pid}})                  
            }
        },
        getOpenid() {
          var appid1 = "wxb94fe8357c844b53";
          var code = this.getUrlParam("code");
          var local = window.location.href;
          if (code == null || code === ''){
            window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="
              + appid1
              + "&redirect_uri="
              + encodeURIComponent(local)
              + "&response_type=code"
              + "&scope=snsapi_base"
              + "&state=1"
              + "#wechat_redirect";
          }else {
            var url = "http://dlsapi.rz158.com/thirdPay/getOpenId?code=" + code;
            axios.post(url).then((response) => {
              localStorage.setItem("openid", response.data.t);
            }).catch((error) => {
            })
          }
        }
    }
}
</script>
<style lang="less">
    .micro-detail-container {
        .header {
            position: relative;
            width: 7.5rem;
            height: 6rem;
            background-position: center top;
            background-repeat: no-repeat;
			margin-top: 1rem;
            background-size: cover;
            h3 {
                position: absolute;
                font-size: 0.44rem;
                color: #fff;
                left: 0.3rem;
                bottom: 0.9rem;
                font-weight: normal;
            }
            p {
                position: absolute;
                font-size: 0.26rem;
                color: #fff;
                // color: #000;                
                left: 0.3rem;
                bottom: 0.38rem;
            }
        }
        .all-audio-box {
            font-size: 0;
            padding: 0 0.3rem 0.1rem 0.3rem;
            border-bottom: 1px solid #ccc;
            margin-top: .3rem;            
            .audio-header {
                height: 0.7rem;
                .title {
                    color: #151515;
                    font-size: 0.36rem;
                    float: left;
                }
                span {
                    float: right;
                    font-size: 0.24rem;
                    color: #707070;
                    img {
                        width: 15px;
                        height: 15px;
                        margin-right: 2px;
                        border-radius: 50%;
                        position: relative;
                        top: 2px;
                   }
                }
            }
            .audio-list {
                margin-bottom: 0.25rem;
                padding-left: .1rem;
                .audio-item {
                    margin-bottom: 0.2rem;
                }
                .list-header {
                    color: #282828;
                    font-size: 0.3rem;
                    font-weight: normal;
                    margin-bottom: 0.1rem;
                }
                span {
                    display: inline-block;
                    color: #909090;
                    font-size: 0.22rem;
                    margin-bottom: 0.1rem;
                }
                p {
                    color: #707070;
                    font-size: 0.28rem;
                    margin-bottom: 0.1rem;
                }
            }
        }
        .box-item {
            padding: 0.3rem;
            border-bottom: 1px solid #ccc;
            h3 {
                color: #0a0a0a;
                font-size: 0.36rem;
                margin-bottom: 0.3rem;
            }
            p {
                color: #282828;
                font-size: 0.28rem;
            }
        }
        .footer-box {
            display: flex;
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 0.8rem;
            font-size: 0.32rem;
            .price {
                flex: 1;
                height: 0.8rem;
                line-height: 0.8rem;
                background: #fff;
                color: #ff2d41;
                text-align: center;
            }
            .buy-btn {
                flex: 1;
                height: 0.8rem;
                line-height: 0.8rem;
                background: #29abae;
                color: #fff;
                text-align: center;
            }
            .haibao {
                flex: 1;
                height: 0.8rem;
                line-height: 0.8rem;
                background: #ff9920;
                color: #fff;
                text-align: center;
            }
            .read-btn {
                flex: 1;
                height: 0.8rem;
                line-height: 0.8rem;
                background: #fff;
                color: #282828;
                text-align: center;
            }
            .get-btn {
                flex: 1;
                height: 0.8rem;
                background: #29abae;
                color: #fff;
                font-size: 0.28rem;
                text-align: center;
                .price-item {
                    font-size: 0.28rem;
                    color: #ff2d41;
                }
                span {
                    float: left;
                    width: 100%;
                }
            }
            .share-btn {
                flex: 1;
                height: 0.8rem;
                line-height: 0.8rem;
                background: #29abae;
                color: #fff;
                text-align: center;
            }
        }
    }
</style>

